<template>
  <el-container>
    <el-aside></el-aside>
    <el-main>
      <el-container>
        <el-header></el-header>
        <el-main>
          <!-- 搜索筛选栏 -->
          <search :searchObj="searchObj">
            <template v-slot:day="{ obj, params }">
                <el-date-picker
                  v-model="params[obj.key]"
                  type="datetime"
                  placeholder="Select date and time"
                />
                <el-color-picker v-model="params.color" />
            </template>
            <template v-slot:rate="{obj, params}">
                <el-rate v-model="params[obj.key]" :colors="obj.colors" />
            </template>
          </search>
          <el-divider />
          <!-- table -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { shallowRef } from "vue";
import { ElInput, ElSelect } from "element-plus";
import search from "./components/search.vue";
import { SearchObjType } from "./type/search";
const searchObj = shallowRef<SearchObjType[]>([
  {
    type: "input",
    label: "姓名",
    key: "name",
    com: ElInput,
  },
  {
    type: "select",
    label: "性别",
    key: "sex",
    com: ElSelect,
    options: [
      {
        key: "1",
        value: "男",
      },
      {
        key: "2",
        value: "女",
      },
    ],
  },
  {
    type: "slot",
    label: "插入",
    key: "day",
    slot: "day",
  },
  {
    type: "slot",
    label: "插入",
    key: "rate",
    slot: "rate",
    colors: ['#99A9BF', '#F7BA2A', '#FF9900']
  },
]);
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style lang="less">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
